<template>
    <div class='track'>
        <div class="top">
            <header class="header">
                <van-nav-bar title="歌单" left-arrow :border="false" fixed @click-left="$router.go(-1)"
                    :style="{ color: '#fff' }">
                    <template #right>
                        <van-icon name="search" size="18" />
                        <van-icon name="ellipsis" size="18" />
                    </template>
                </van-nav-bar>
            </header>
            <div class="top-con">
                <van-image width="100" height="100" :src="listImg" radius="10px" />
                <div class="top-con-r">
                    <p>{{ listName }}</p>
                    <p class="fs12"><van-image round width="20px" height="20px" :src="userImg" /><span class="uname">{{
                        userName
                    }} ></span></p>
                </div>
            </div>
            <p class="update-info">编辑信息 ></p>
            <div class="top-btn">
                <van-button icon="share-o" type="info" color="#aaa">
                    分享
                </van-button>
                <van-button icon="other-pay" type="info" color="#aaa">
                    评论
                </van-button>
                <van-button icon="sign" type="info" color="#aaa" disabled>
                    收藏
                </van-button>
            </div>
        </div>
        <div class="playlist">
            <van-row class="footer_header">
                <van-col span="3">
                    <div @click="playAll">
                        <van-icon :name="require('@/assets/d_e.png')" size="25"></van-icon>
                    </div>
                </van-col>
                <van-col span="17">
                    <h4>
                        播放全部
                        <span class="count"></span>
                    </h4>
                </van-col>
                <van-col span="2">
                    <van-icon :name="require('@/assets/dbz.png')"></van-icon>
                </van-col>
                <van-col span="2">
                    <van-icon :name="require('@/assets/list.png')"></van-icon>
                </van-col>
            </van-row>
            <div class="mod" v-for="(v) in playlist" :key="v.id" @click="addListToPlay(v.id, v)">
                <!-- @click="addListToPlay(v.id, v)" -->
                <div>
                    <h3>{{ v.name }}</h3>
                    <p class="mod-p"> <van-tag type="primary" plain>SQ</van-tag>
                        {{ v.ar[0].name }}
                    </p>
                </div>
                <div class="mod-r">
                    <van-icon color="#aaa" name="play-circle-o" />
                    <van-icon color="#aaa" name="ellipsis" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPalylistDetail } from '@/api';

export default {
    name: 'trackView',
    data() {
        return {
            userImg: '',
            userName: '',
            listImg: '',
            listName: '',
            status: '',
            playlist: []
        }
    },
    props: {
        id: {
            type: Number,
            default: 0,
        },
        
    },
    computed: {},
    components: {},
    created() { },
    async beforeMount() {
        this.status = JSON.parse(localStorage.getItem('myLogin'))
        var { data } = await getPalylistDetail(this.id, this.status)
        let userData = JSON.parse(localStorage.getItem('myMusicData')).data
        let userImg = userData.profile.avatarUrl
        let userName = userData.profile.nickname
        this.userImg = userImg
        this.userName = userName
        this.listImg = data.playlist.coverImgUrl
        this.listName = data.playlist.name
        this.playlist = data.playlist.tracks
    },
    mounted() { },
    methods: {
        addListToPlay(id, song) {
            this.$router.push({ name: 'play' });
            // song.id 通过vuex来更改对应的id以及存入对应的song
            this.$store.dispatch('toggleSong', id);
            // 存储对应的歌曲
            this.$store.dispatch('addPlayList', song);
        },
        playAll() {
            // 添加到播放列表
            this.$store.dispatch('addPlayList', this.playlist);
            // 切换歌曲
            this.$store.dispatch('toggleSong', this.playlist[0].id);
        }
    }
}
</script>
<style scoped>
.playlist {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.header .van-nav-bar {
    background-color: transparent !important;
    color: #fff;
}

.header .van-icon {
    background-color: transparent !important;
    color: #fff;
}

* {
    margin: 0;
    padding: 0;
}

::v-deep .van-nav-bar__title,
.header .van-icon,
::v-deep .van-nav-bar__arrow {
    color: #fff;
}

.top {
    background: #797979;
    padding: 55px 20px 20px;
    color: #fff;
    font-size: 12px;
}

.van-button {
    width: 30%;
    border-radius: 30px;
}

.top-btn {
    display: flex;
    justify-content: space-between;
}

.update-info {
    margin: 10px 0;
}

.top-con-r {
    margin-left: 10px;
}

.top-con-r p {
    margin-bottom: 10px;
    margin-top: 5px;
    display: flex;

}

.top-con {
    display: flex;
    font-size: 14px;
}

.fs12 {
    font-size: 12px;
}

.uname {
    margin-left: 10px;
}

hr {
    width: 98%;
    background: #eee;
    margin: 0 auto;
}

p {
    margin: 5px;
}

h3 {
    font-weight: normal;
    color: #1989fa;
    margin: 5px;
    font-size: 16px;
}

.mod-p {
    font-size: 12px;
}

.mod-r {
    display: flex;
    align-self: center;
}

.box>.title {
    display: flex;
    justify-content: space-between;
}

.box {
    width: 80%;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 20px;
}

.title>button {
    border: 1px solid red;
    border-radius: 20px;
    color: red;
    background-color: #fff;
    font-size: 12px;
}

.mod {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.mod .van-icon {
    margin-left: 30px;
    font-size: 22px;
}
</style>
